---
id: 62a1166ed9a56d439c0770e7
title: Step 12
challengeType: 0
dashedName: step-12
---

# --description--

在 `#stats` 元素中創建三個 `span` 元素。 給每個元素一個類 `stat`。 然後給第一個元素設置文本 `XP: 0`，給第二個元素設置文本 `Health: 100`，給第三個元素設置文本 `Gold: 50`。

# --hints--

`#stats` 元素中應該有三個 `span` 元素。

```js
const spans = document.querySelectorAll('#stats > span');
assert.equal(spans?.length, 3);
```

應該給新的三個 `span` 元素一個 `stat` 類。

```js
assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3);
```

第一個 `.stat` 元素應具有提供的文本 `XP: 0`。

```js
assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0');
```

第二個 `.stat` 元素應具有提供的文本 `Health: 100`。

```js
assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100');
```

第三個 `.stat` 元素應具有提供的文本 `Gold: 50`。

```js
assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
    <script src="./script.js"></script>
  </head>
--fcc-editable-region--
  <body>
    <div id="game">
      <div id="stats">

      </div>
      <div id="controls"></div>
      <div id="monsterStats"></div>
      <div id="text"></div>
    </div>
  </body>
--fcc-editable-region--
</html>
```

```js
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
```
